
<template>
  <div class="syslog-container">
    <!--    查询表单-->
    <Search ref="search" :SearchConfig="SearchConfig" :searchData="searchData">
      <template #buttons>
        <ButtonGroup :ButtonConfig="ButtonConfig" @reset="reset" @query="query"/>
      </template>
    </Search>
    <!--    数据网格-->
    <div class="data-grid">
      <el-table
          :data="gridData"
          :highlight-current-row="true"
          border
          height="520px"
          style="width: 100%">
        <el-table-column
            type="index"
            fixed
            label="序号"
            width="50">
        </el-table-column>


        <el-table-column
            prop="user"
            label="操作用户"
        >
        </el-table-column>

        <el-table-column
            label="ip"
        >
          <template slot-scope="scope">
            <el-tag>{{scope.row.ip}}
              <el-tooltip class="item" effect="dark" :content="ipAddress" placement="top-end">
                <i class="el-icon-view" style="margin-left: 5px;" @click="lookIPAddress(scope.row.ip)"/>
              </el-tooltip>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="content"
            label="操作内容"
        >
        </el-table-column>

        <el-table-column
            prop="param"
            label="操作参数"
        >
        </el-table-column>

        <el-table-column
            prop="optionTime"
            label="操作时间"
        >
        </el-table-column>
      </el-table>
    </div>

    <!--    分页工具-->
    <page-comp :pageOptions="pageOptions"/>
  </div>
</template>

<script>
import PageComp from '@/components/pagination'
import Search from '@/components/search/index'
import ButtonGroup from '@/components/ButtonGroup'
import {list,getIpAddress} from "@/api/syslogApi";
import {SearchConfig,ButtonConfig} from "@/views/system/watch/syslog.config";

export default {
  name: 'SysLog',
  components: {PageComp, Search,ButtonGroup},
  dicts: [],
  data() {
    return {
      pageOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pagesizes: [10, 20, 30, 40],
        sizeChangeCallback(pageSize) {
          this.pageSize = pageSize
        },
        currentChangeCallback(currPage) {
          this.currentPage = currPage
        }
      },
      gridData: [],
      searchData: {
        user: null,
        content: null,
        optionTime: [],
      },
      SearchConfig,
      ButtonConfig,
      ipAddress: '查看ip归属地'
    }
  },
  watch: {
    'pageOptions.currentPage': function (ne,old) {
      this.query()
    },
    'pageOptions.pageSize': function (ne,old){
      this.query()
    }
  },
  methods: {
    query() {
      list(this.searchData,this.pageOptions.currentPage,this.pageOptions.pageSize).then(success => {
        this.gridData = success.data
        this.pageOptions.total = success.total
      })
    },
    reset() {
      this.$refs.search.resetFields()
    },
    lookIPAddress(ip) {
      getIpAddress(ip).then(res => {
        this.ipAddress = res
        setTimeout(() => {
          this.ipAddress = '查看ip归属地'
        },2000)
      })
    }
  },
  mounted() {
    list().then(success => {
      if (success) {
        this.gridData = success.data
        this.pageOptions.total = success.total
      }
    })
  }
}
</script>

<style scoped>
.syslog-container {
  position: relative;
  height: calc(100% - 31px);
}

.syslog-container > .data-grid {
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
}
</style>